<div class="goods_box">
  <el-row>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>

  <el-row class="search_box">
    <el-col :span="10">
      <el-input placeholder="请输入内容" v-model="info.query" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </el-col>
    <el-col :span="4" :offset="2">
      <!-- <router-link to="addGoods" tag="el-button">添加商品</router-link> -->
      <el-button @click="addGoods">添加商品</el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-table
      :data="goodsInfo"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="70">
      </el-table-column>
      <el-table-column
      prop="goods_name"
        label="商品名称"
        width="230">
      </el-table-column>
      <el-table-column
        prop="goods_price"
        label="商品价格">
      </el-table-column>
      <el-table-column
        label="商品状态">
        <template>
          {{ goodsInfo.goods_state | format }}
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_weight"
        label="商品重量">
      </el-table-column>
      <el-table-column
        prop="goods_number"
        label="商品数量">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="data">
          <el-tooltip class="item" effect="dark" content="编辑" placement="left">
            <el-button @click="editGoodsHandler(data.row)" icon="el-icon-edit" size="mini" type="success" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button  @click="deleteHandler(data.row.goods_id)" icon="el-icon-delete" size="mini" type="danger" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-pagination
      @size-change="sizeChangeHandler"
      @current-change="currentChangeHandler"
      :current-page="info.pagenum"
      :page-sizes="[8, 20, 30, 40]"
      :page-size="info.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-row>
  </el-row>
</div>